<template>
  <div class="footer">
    <div class="title">
      <div class="name">更多课程推荐</div>
      <div class="introduce">精雕细琢 机制精品</div>
    </div>
    <div class="lesson-list">
      <div v-for="(item,index) in 4" :key="index" class="lesson-card btn">
        <div class="lesson-img">
          <img
            src="../../../../assets/image/onlineStudent/lesson-logo.png"
            alt=""
          />
        </div>
        <div class="lesson-info">
          <div class="info-title">市政管理工程--名师护航班</div>
          <div class="introduce">
            <div class="info-name">主讲：韩老师</div>
            <div class="info-learn">
              <img
                src="../../../../assets/image/onlineStudent/student-ico.png"
                alt=""
              /> 12354
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style lang="less" scoped>
@import '../../common/index.less';
.footer {
  margin-bottom: 40px;
  .title {
    .flex('', center);
    margin-bottom: 14px;
    .before();
    .name {
      margin-right: 10px;
      font-size: 18px;
      color: #303133;
      font-weight: bold;
    }
    .introduce {
      font-size: 14px;
      color: #a1a3a8;
    }
  }
  .lesson-list{
    .flex();
  }
  .lesson-card {
    width: 274px;
    margin-right: 34px;
    border-radius:4px;
    .lesson-img {
      img {
        width: 274px;
        height: 155px;
      }
    }
    .lesson-info {
      background: @baseBgColor;
      padding:30px 15px;
      .info-title {
        margin-bottom: 20px;
        font-size: 16px;
        color: #484848;
      }
      .introduce {
        .flex(space-between, center);
        color: #979797;
      }
    }
  }
}
</style>
